<template>
  <div class="page-wrap">
    <div class="img-header">
      <div class="page-heade-text" style="width:900px;">
        场景工程列表（用于快速构建攻防赛、渗透演练<span v-if="isRetainer">和护网演练</span>的工程）
      </div>
      <div class="filter-wrap">
        <Button type="primary" ghost class="md-add-jh" @click="creatProBtn">创建场景工程</Button>
        <Select filterable
          v-model="projectTypeValue"
          filterable
          clearable
          placeholder="场景工程类型"
          @on-change="listenProjectTypeList"
          style="width: 150px;margin-left: 15px;"
        >
          <Option value="offense_and_defense">攻防赛</Option>
          <!-- <Option  value="capture_the_flag">夺旗赛</Option> -->
          <!-- <Option  value="red_and_blue_confrontation">对抗演练</Option> -->
          <Option value="break_through">渗透演练</Option>
          <Option v-if="isRetainer" value="protect_network_exercise">护网演练</Option>
          <!-- <Option  value="schedule">排课计划</Option> -->
          <!-- <Option  value="examination_plan">考试计划</Option> -->
          <!-- <Option  value="test">课件</Option> -->
          <!-- <Option  value="other">其他</Option> -->
        </Select>
        <Input
          clearable
          v-model.trim="searchProjectname"
          placeholder="场景工程名称"
          @on-search="searchProName"
          style="width: 180px;margin-left: 15px;"
          @on-change="limitingReach()"
        />
        <Button
          class="header-btn"
          type="primary"
          ghost
          style="height: 32px;margin-left: 5px;"
          @click="refreshScenPro()"
          ><i class="el-icon-refresh-right"
        /></Button>
      </div>
    </div>
    <div v-show="showProjectList">
      <div class="content-wrap">
        <div class="project-item" v-for="(item, key) in projectList" :key="key">
          <div class="item-first-line">
            <div class="project-name-state">
              <Tooltip :content="item.projectname" placement="top-start" :max-width="400">
                <div class="project-Name" @click="goTopo(item)">
                  {{ handleProIndex(key) }}.
                  <span style="cursor: pointer;">{{ item.projectname }}</span>
                </div>
              </Tooltip>
              <div class="project-status-text" :style="{ color: setColor(item.status).color }">
                {{ setColor(item.status).text }}
              </div>
              <div class="project-others-infos display-flex" style="margin: 0 15px;">
                <span>创建者：</span>
                <Tooltip :content="item.creatorName" placement="top-start" :max-width="400">
                  <span class="text-ellipsis" style="width: 120px;">{{ item.creatorName }}</span>
                </Tooltip>
              </div>
              <div class="project-creationTime">
                <span>创建时间：</span>
                <span>{{ item.createtime }}</span>
              </div>
            </div>
            <div class="btn-icon-wrap">
              <Poptip
                transfer
                confirm
                title="确定要删除这个场景工程吗？"
                @on-ok="deleteCurrentProject(item.status, item.id)"
                :style="setCanClick(item)"
              >
                <img
                  :src="setDelSrc(item)"
                  class="click-icon"
                  alt="del"
                  title="删除"
                  @mouseenter="enterDelIcon(key)"
                  @mouseleave="leaveDelIcon(key)"
                />
              </Poptip>
            </div>
          </div>
          <div class="project-other-info">
            <p style="width: 115px;">
              <span>类型：</span>
              <span>{{ getSceneType(item.type) }}</span>
            </p>
            <p style="width: 120px;margin: 0 15px;" class="display-flex">
              <span>环境套数：</span>
              <Tooltip :content="item.envCount" placement="top-start" :max-width="400">
                <span style="width: 50px;" class="text-ellipsis">{{ item.envCount }}</span>
              </Tooltip>
            </p>
            <p class="config-info">
              <span>配置信息：</span>
              <Tooltip
                :content="handleTargets(item.targets ? item.targets : [])"
                placement="top-start"
                :max-width="400"
              >
                <span>{{ handleTargets(item.targets ? item.targets : []) }}</span>
              </Tooltip>
            </p>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-end;margin: 15px 0">
        <Page
          :total="proTotal"
          :current="currentPage"
          :page-size="currentItem"
          show-total
          show-elevator
          @on-change="switchineTaskCurrentPage"
          @on-page-size-change="switchTaskItemPage"
        />
      </div>
    </div>

    <div v-show="showDefImg1" class="defGraphWrap">
      <div class="defGraph"></div>
      <div class="graphText">暂无信息</div>
    </div>

    <Modal
      v-model="createProjectTaskModal"
      ok-text="确定"
      width="600"
      :loading="createProjectTaskModalLoading"
      id="createProject"
      @on-ok="saveProjectData"
      @on-cancel="cancel"
    >
      <p slot="header">
        <span>{{ createProjectTitle }}</span>
      </p>
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
        style="position:relative;"
      >
        <div class="step_1" v-show="step == 1">
          <FormItem label="名字" prop="name" style="width:94%">
            <Input
              v-model.trim="formValidate.name"
              placeholder="请输入工程名称"
              clearable
              :maxlength="64"
            ></Input>
          </FormItem>
          <FormItem label="类型" prop="type" style="width:94%">
            <Select filterable
              v-model="formValidate.type"
              :disabled="stepState"
              filterable
              clearable
              placeholder="请选择场景类型"
              @on-change="listentTaskType"
            >
              <Option value="offense_and_defense">攻防赛</Option>
              <!-- <Option  value="capture_the_flag">夺旗赛</Option> -->
              <!-- <Option  value="red_and_blue_confrontation">对抗演练</Option> -->
              <Option value="break_through">渗透演练</Option>
              <Option v-if="isRetainer" value="protect_network_exercise">护网演练</Option>
              <!-- <Option  value="schedule">排课计划</Option> -->
              <!-- <Option  value="examination_plan">考试计划</Option> -->
              <!-- <Option  value="test">课件</Option> -->
              <!-- <Option  value="other">其他</Option> -->
            </Select>
          </FormItem>
          <FormItem
            label="flag服务器"
            prop="flagServer"
            v-if="formValidate.type == 'offense_and_defense'"
            style="width:94%"
          >
            <RadioGroup v-model="formValidate.flagServer">
              <Radio label="true">是</Radio>
              <Radio label="false">否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="环境数量" prop="setNumber" style="width:94%">
            <input-number
              :min="formValidate.type === 'offense_and_defense' ? 2 : 1"
              :value="1"
              :max="10000"
              v-model="formValidate.setNumber"
              style="width:288px"
            ></input-number
            >套
          </FormItem>
          <!-- <FormItem class="ivu-form-item-required" label="靶标数量" prop="targetNumber" style="width:94%" v-if="targetNumberBol">
                        <input-number :min="1" :value="200" :max="10000" v-model="formValidate.targetNumber" style="width:288px"></input-number>个
                    </FormItem> -->
          <FormItem label="部署模式" prop="deployMode" v-if="targetNumberBol" style="width:94%">
            <RadioGroup v-model="formValidate.deployMode">
              <Radio label="tunnel">数据通道模式</Radio>
              <Radio label="route">路由模式</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem
            label="是否可更换外网IP"
            prop="hwChangeIp"
            v-if="targetNumberBol"
            style="width:94%"
          >
            <RadioGroup v-model="formValidate.hwChangeIp">
              <Radio label="1">是</Radio>
              <Radio label="0">否</Radio>
            </RadioGroup>
          </FormItem>
          <!-- <FormItem label="公网子网" class="ivu-form-item-required" style="width:94%" v-if="targetNumberBol">
                        <Select filterable v-model="currentTargetSubnetValue" placeholder="请选择子网"   filterable clearable >
                            <Option  v-for="item in targetSubnetDataList" :key="item.id" :value="item.id" >名称：{{item.name}}CIDR：{{item.cidr}}</Option>
                        </Select>
                    </FormItem> -->
          <FormItem label="描述" prop="desc" style="margin-top:10px;width:94%">
            <Input
              v-model.trim="formValidate.desc"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="描述"
              clearable
              :maxlength="200"
            ></Input>
          </FormItem>
          <div style="display: flex;justify-content: flex-end;">
            <Button type="success" size="small" @click="nextStep1(2)">下一步</Button>
          </div>
        </div>
        <!-- 二步和三步 -->
        <div v-show="step == 2" class="step_2&3" style="width:94%">
          <!-- <div style="width:365px;float:left;">
                        <FormItem v-model="formValidate.selectedVmData"  label="环境配置">
                            <span class="starlet" style="left:-70px">*</span>
                            <input type="hidden" >
                            <Tag v-for="(item,index) in formValidate.selectedVmData" :key="index" :name="item.id" closable @on-close="handleClose2(index)" color="primary" type='dot' >{{ item.name }}</Tag>
                        </FormItem>
                   </div> -->
          <div>
            <!-- <FormItem label="" prop="vmtype" style="margin-bottom:10px">
                            <RadioGroup v-model="formValidate.vmtype" type="button" @on-change="listenTypeChange">
                                <Radio label="CLIENT" >选手操作机</Radio>
                                <Radio label="SERVER" v-if="!targetNumberBol">题目</Radio>
                            </RadioGroup>
                        </FormItem> -->

            <div style="margin-bottom:10px;padding-left:55px;">
              <!-- <Button v-show="formValidate.vmtype == 'CLIENT'" :type="btnValue==2 ? 'primary' : 'default'" @click="topicMethod" :style="{width:'150px',position:'relative',right:'14px',background:disabledColor}" :disabled="disabledClient">题目</Button> -->
              <!-- <Button :type="btnValue==1 ? 'primary' : 'default'" @click="targetMethod" :style="{width:'150px',position:'relative',left:'40px',background:disabledColor}" :disabled="disabledClient">靶标</Button> -->
            </div>
            <u style="position:absolute;left:17px;top:80px;font-size:14px;" v-if="hintBol"
              >需手动配置Flag</u
            >
            <FormItem
              label="题目"
              v-if="btnValue == 2 && formValidate.vmtype == 'SERVER'"
              style="margin-top:0px"
            >
              <Select filterable
                v-model="currentTargetValue"
                placeholder="请选择题目"
                filterable
                clearable
                @on-change="listenTargetValue"
              >
                <Option
                  v-for="item in targetDataList"
                  :key="item.chaId"
                  :value="item.chaId"
                  :title="item.name"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="靶标" v-if="btnValue == 1" style="margin-top:30px;">
              <Select filterable
                v-model="currentTargetValueVm"
                placeholder="请选择靶标"
                filterable
                clearable
                @on-change="listenTargetValueVm"
                :disabled="topicBol"
              >
                <Option
                  v-for="item in targetVmListData"
                  :key="item.id"
                  :value="item.id"
                  :title="item.targetName"
                  >{{ item.targetName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem
              v-show="formValidate.vmtype == 'CLIENT'"
              label="镜像"
              prop="image"
              class="ivu-form-item-required"
            >
              <Select filterable
                v-model="formValidate.image"
                :disabled="currentTargetValue != '' && formValidate.vmtype == 'SERVER'"
                placeholder="请选择镜像"
                filterable
                clearable
                @on-change="listenImageValue"
              >
                <Option
                  v-for="item in imageDataList"
                  :key="item.id"
                  :value="item.id"
                  style="max-width:320px;z-index:99999"
                  :disabled="item.haveUsers == 0"
                  :title="item.imageName"
                  >{{ item.imageName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem
              v-show="formValidate.vmtype == 'CLIENT'"
              label="配额"
              prop="flavor"
              class="ivu-form-item-required"
            >
              <Select filterable
                v-model="formValidate.flavor"
                :disabled="currentTargetValue != '' && formValidate.vmtype == 'SERVER'"
                placeholder="请选择配额"
                filterable
                clearable
                @on-change="listenFlavorValue"
              >
                <Option
                  v-for="item in showFloverList"
                  :key="item.cloudId"
                  :value="item.cloudId"
                  :title="item.flavorName"
                  >{{ item.flavorName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem v-show="formValidate.vmtype == 'SERVER'" label="镜像" prop="images">
              <Select filterable
                v-model="formValidate.images"
                :disabled="currentTargetValue != '' && formValidate.vmtype == 'SERVER'"
                placeholder="请选择镜像"
                filterable
                clearable
                @on-change="listenImageValue"
              >
                <Option
                  v-for="item in imageDataList"
                  :key="item.id"
                  :value="item.id"
                  style="max-width:320px;z-index:99999"
                  :disabled="item.haveUsers == 0"
                  :title="item.imageName"
                  >{{ item.imageName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem v-show="formValidate.vmtype == 'SERVER'" label="配额" prop="flavors">
              <Select filterable
                v-model="formValidate.flavors"
                :disabled="currentTargetValue != '' && formValidate.vmtype == 'SERVER'"
                placeholder="请选择配额"
                filterable
                clearable
                @on-change="listenFlavorValue"
              >
                <Option
                  v-for="item in showFloverList"
                  :key="item.cloudId"
                  :value="item.cloudId"
                  :title="item.flavorName"
                  >{{ item.flavorName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="数量" prop="numbers" v-show="disabledClient">
              <input-number
                :min="1"
                :value="1"
                :max="10000"
                v-model="formValidate.numbers"
                style="width:303px"
              ></input-number
              >个
            </FormItem>
            <!-- <FormItem label="公网子网" class="ivu-form-item-required" v-show="targetNumberBol">
                            <Select filterable v-model="currentTargetSubnetValue" placeholder="请选择子网"   filterable clearable >
                                <Option  v-for="item in targetSubnetDataList" :key="item.id" :value="item.id"  :title="`名称：${item.name}CIDR：${item.cidr}`">名称：{{item.name}}CIDR：{{item.cidr}}</Option>
                            </Select>
                        </FormItem> -->
            <FormItem label="前缀" prop="pre">
              <span class="starlet" style="left:-47px">*</span>
              <Input
                v-model.trim="formValidate.pre"
                placeholder="请输入设备名称前缀"
                clearable
                :maxlength="64"
              ></Input>
            </FormItem>
            <FormItem
              v-model="formValidate.selectedVmData"
              label="选手操作机"
              class="contentTag"
              v-show="formValidate.vmtype == 'CLIENT'"
            >
              <span
                class="starlet"
                style="left:-82px"
                v-if="formValidate.type != 'offense_and_defense'"
                >*</span
              >
              <input type="hidden" />
              <Tag
                v-for="(item, index) in formValidate.selectedVmClinet"
                :key="index"
                :name="item.id"
                closable
                @on-close="handleClose1(index)"
                color="primary"
                type="dot"
                :title="item.name"
                >{{ item.name }}</Tag
              >
            </FormItem>
            <FormItem
              v-model="formValidate.selectedVmData"
              label="题目"
              class="contentTag"
              v-if="!targetNumberBol"
              v-show="formValidate.vmtype == 'SERVER'"
            >
              <span class="starlet" style="left:-48px">*</span>
              <input type="hidden" />
              <Tag
                v-for="(item, index) in formValidate.selectedVmServer"
                :key="index"
                :name="item.id"
                closable
                @on-close="handleClose2(index)"
                color="primary"
                type="dot"
                :title="item.name"
                >{{ item.name }}</Tag
              >
            </FormItem>
            <FormItem style="text-align:center;margin-bottom:0px;position:relative;top:-10px;">
              <!-- 第二步 -->
              <Button
                v-if="createProjectTitle == '接入机器配置'"
                @click="commitSelectData"
                long
                type="warning"
                ghost
                >增加接入机器</Button
              >
              <!-- 第三步 -->
              <Button
                v-if="createProjectTitle == '题目配置'"
                @click="commitSelectData"
                long
                type="warning"
                ghost
                >增加题目</Button
              >
            </FormItem>
            <div
              v-if="formValidate.vmtype != 'SERVER'"
              style="display: flex;justify-content: flex-end;"
            >
              <Button
                style="margin-right:10px"
                type="info"
                size="small"
                @click="
                  step = 1;
                  createProjectTitle = '基本信息配置';
                "
                >上一步</Button
              >
              <Button type="success" :loading="saveLoading" size="small" @click="nextStep2">{{
                formValidate.type == 'protect_network_exercise' ? '保 存' : '下一步'
              }}</Button>
            </div>
            <div v-else style="display: flex;justify-content: flex-end;">
              <Button
                style="margin-right:10px"
                type="info"
                size="small"
                @click="
                  createProjectTitle = '接入机器配置';
                  step = 2;
                  formValidate.vmtype = 'CLIENT';
                  formValidate.pre = `接入机器${formValidate.selectedVmClinet.length + 1}`;
                "
                >上一步</Button
              >
              <Button type="success" :loading="saveLoading" size="small" @click="nextStep3"
                >保 存</Button
              >
            </div>
          </div>
        </div>
      </Form>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
// import $ from 'jquery'
import cookieUse from '@/libs/cookie.js';
import encryption from '@/libs/encryption.js';
const validateName = (rule, value, callback) => {
  var myReg = /[~!！@#$%^&*()/\|,<>?"'“‘();:+=\[\]{}]/;
  value = value.replace(/\s*/g, '');
  if (!value) {
    callback('请填写名字');
  } else {
    if (myReg.test(value)) {
      callback('名字不能包含特殊字符');
    } else {
      callback();
    }
  }
};
export default {
  components: {},
  data() {
    const validateNum = (rule, value, callback) => {
      //验证只能填入数字
      if (!Number.isInteger(value)) {
        callback(new Error('请输入正整数'));
        return;
      }
      if (this.formValidate.type === 'offense_and_defense' && value < 2) {
        if (value < 2) {
          callback(new Error('环境数量必须大于2'));
          return;
        }
      } else {
        if (value < 1) {
          callback(new Error('环境数量必须大于1'));
          return;
        }
      }
      callback();
    };
    return {
      saveLoading: false,
      createProjectTitle: '基本信息配置', //标题
      step: 1, //默认步骤1
      stepState: false,
      targetSubnetDataList: [],
      currentTargetSubnetValue: '',
      isRootDesigner: false,
      USER_ID: '',
      // 显示省略图
      showDefImg1: false,
      showProjectList: false,
      disabledClient: true,
      disabledColor: '#F4F4F4',
      hintBol: false,
      projectDelayStatus: '',
      searchProjectname: '',
      projectList: [],
      createProjectTaskModal: false,
      createProjectTaskModalLoading: true,
      formValidate: {
        name: '',
        configer: '',
        Profile: '',
        osInfo: '',
        type: '',
        configContent: '',
        selectedVmData: [],
        selectedVmClinet: [],
        selectedVmServer: [],
        desc: '',
        vmName: '',
        vmIP: '',
        taskMode: 'normal',
        flavor: '',
        image: '',
        flavors: '',
        images: '',
        deviceName: '',
        numbers: 1,
        vmtype: 'CLIENT',
        pre: '',
        setNumber: 2,
        targetNumber: 200,
        publicSubnetValue: '',
        flagServer: 'false',
        hwChangeIp: '0',
        deployMode: 'tunnel'
      },
      ruleValidate: {
        name: [{ required: true, message: '', trigger: 'change', validator: validateName }],
        configer: [{ required: true, message: '请选择配置', trigger: 'change' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        selectedVmData: [{ required: true, message: '请选择虚拟机' }],
        taskMode: [{ required: true, message: '', trigger: 'change' }],
        setNumber: [
          { required: true, message: '请输入环境数量', trigger: 'change', type: 'number' },
          { validator: validateNum, trigger: 'change' }
        ],
        targetNumber: [
          { required: true, message: '请输入靶标数量', trigger: 'change', type: 'number' }
        ],
        numbers: [{ required: true, message: '请输入数量', trigger: 'change', type: 'number' }],
        vmtype_CLIENT: [
          { required: true, message: '请选择操作机类型', trigger: 'change', type: 'number' }
        ]
      },
      imageDataList: [],
      flavorDataList: [],
      showFloverList: [],
      proTotal: 0,
      currentPage: 1,
      currentItem: 10,
      setTableHei: 100,
      contentHei: 100,
      setintervalTime: null,
      currentTargetValue: '', // 收集题目Id
      currentTargetValueVm: '',
      targetDataList: [],
      getListModelBol: '',
      topicBol: true,
      projectTypeValue: '',
      targetVmListData: [],
      btnValue: 2,
      targetNumberBol: false,
      prefixNum: 1,
      isRetainer: true
    };
  },
  created() {
    this.isRetainer = sessionStorage.getItem('isRetainer') === 'true';
    // this.getToken = cookieUse.getCookie('desig-token')
    // // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
  },
  mounted() {
    this.isRetainer = sessionStorage.getItem('isRetainer') === 'true';
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    // 模板列表
    this.getProjectList();
  },
  computed: {},
  beforeDestroy() {
    clearInterval(this.proSetInterval);
  },
  methods: {
    nextStep3() {
      if (this.formValidate.selectedVmServer.length == 0) {
        this.$Message.warning('请提交题目!');
        return;
      }
      if (this.formValidate.numbers < 1) {
        this.$Message.warning('数量最小为1!');
        return;
      }
      this.saveProjectData(); //提交创建
    },
    nextStep2() {
      // 护网演练没有第三步
      if (this.formValidate.type == 'protect_network_exercise') {
        // if(this.currentTargetSubnetValue == ''){
        //     this.$Message.warning('请填写必填项!')
        //     return
        // }
        this.saveProjectData(); //提交创建
        return;
      }
      if (this.formValidate.numbers < 1) {
        this.$Message.warning('数量最小为1!');
        return;
      }
      if (this.formValidate.selectedVmClinet.length == 0) {
        this.$Message.warning('请提交选手操作机!');
        return;
      }
      this.formValidate.vmtype = 'SERVER'; //进入第三步
      this.createProjectTitle = '题目配置';
      this.formValidate.pre = '';
      this.targetDataList.forEach((item) => {
        if (item.chaId == this.currentTargetValue) {
          this.formValidate.pre = item.name;
        }
      });
    },
    nextStep1(step) {
      // if(this.formValidate.type == 'protect_network_exercise' && this.currentTargetSubnetValue == ''){
      //     this.$Message.warning('请填写必填项!')
      //     return
      // }
      this.$refs['formValidate'].validate((flag) => {
        if (flag) {
          this.stepState = true;
          this.step = step; //进入第二步
          this.createProjectTitle = '接入机器配置';
        }
      });
    },
    topicMethod() {
      this.btnValue = 2;
      this.currentTargetValueVm = '';
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.hintBol = false;
      this.formValidate.pre = '';
    },
    targetMethod() {
      this.btnValue = 1;
      this.currentTargetValue = '';
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.pre = '';
      this.hintBol = true;
    },
    limitingReach() {
      let _this = this;
      clearTimeout(_this.setTimeoutReach);
      _this.setTimeoutReach = setTimeout(() => {
        _this.getProjectList();
      }, 300);
    },
    listenProjectTypeList(value) {
      if (!value) {
        this.projectTypeValue = '';
      } else {
        this.projectTypeValue = value;
      }
      this.getProjectList();
    },
    listenTypeChange(value) {
      this.formValidate.pre = '';
      // 切换操作机和题目是 清空镜像 配额 题目  孔 2020.2.5
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.numbers = 1;
      this.currentTargetValue = '';
      this.currentTargetValueVm = '';
      if (value == 'CLIENT') {
        this.topicBol = true;
        this.hintBol = false;
        this.disabledClient = true;
        this.disabledColor = '#F4F4F4';
        this.formValidate.pre = '接入机器' + this.prefixNum;
      } else if (value == 'SERVER') {
        this.formValidate.numbers = 1;
        this.topicBol = false;
        // this.hintBol = true;
        this.disabledClient = false;
        this.disabledColor = '';
      } else {
        this.topicBol = true;
        this.hintBol = false;
      }
      this.getTargetDataList();
    },
    listentTaskType(value) {
      this.getListModelBol = '';
      this.targetNumberBol = false;
      if (value == 'offense_and_defense') {
        //攻防赛
        this.getListModelBol = 1;
        //题目必选，接入非必选
      } else if (value == 'capture_the_flag') {
        //夺旗赛
        this.getListModelBol = 2;
      } else if (value == 'red_and_blue_confrontation') {
        //对抗演练
      } else if (value == 'break_through') {
        //渗透演练
        //接入必选，题目必选
      } else if (value == 'protect_network_exercise') {
        //护网演练
        this.targetNumberBol = true;
      } else if (value == 'schedule') {
        //排课计划
      } else if (value == 'examination_plan') {
        //考试计划
      } else if (value == 'test') {
        //课件
      } else if (value == 'other') {
        //其他
      } else {
        this.getListModelBol = '';
      }
      this.getTargetDataList();
    },
    getSceneType(type) {
      let _text = null;
      switch (type) {
        case 'offense_and_defense':
          _text = '攻防赛';
          break;
        case 'capture_the_flag':
          _text = '夺旗赛';
          break;
        case 'red_and_blue_confrontation':
          _text = '对抗演练';
          break;
        case 'break_through':
          _text = '渗透演练';
          break;
        case 'protect_network_exercise':
          _text = '护网演练';
          break;
        case 'schedule':
          _text = '排课计划';
          break;
        case 'examination_plan':
          _text = '考试计划';
          break;
        case 'test':
          _text = '课件';
          break;
        case 'other':
          _text = '其他';
          break;
        default:
          break;
      }
      return _text;
    },
    cancel() {
      this.formValidate.selectedVmClinet = [];
      this.formValidate.selectedVmServer = [];
      // 重置步骤
      this.step = 1;
      this.formValidate.vmtype = 'CLIENT';
      this.stepState = false;
      this.$refs.formValidate.resetFields(); //清空表单
    },
    //替换删除接口0510--liqing
    deleteCurrentProject(status, projectId) {
      this.axios({
        url: this.baseURL + `/competetopo/projects/${projectId}`, //'/topo/project/delete/'+projectId,
        method: 'delete'
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          this.$Message.success('删除成功');
          this.getProjectList();
          this.$emit('setProjectUpdate', false);
        } else {
          this.$Message.error(response.message);
        }
      });
      // if(status!=0){
      //     this.$Message.info("请先清空部署该工程")
      //     return;
      // }else{

      // }
    },
    listenImageValue(value) {
      // this.currentTargetValue = ""
      this.getImageDetail(value);
    },
    listenFlavorValue(value) {
      // this.currentTargetValue = ""
    },
    listenTargetValue(value) {
      let _this = this;
      _this.formValidate.images = '';
      _this.formValidate.flavors = '';
      _this.currentTargetValueVm = '';
      if (!value) {
        _this.formValidate.images = '';
        _this.formValidate.flavors = '';
      }
      for (let i = 0; i < _this.targetDataList.length; i++) {
        const element = _this.targetDataList[i];
        if (value == element.chaId) {
          if (!element.imageId || !element.flavorRef) {
          } else {
            _this.formValidate.pre = element.name;
            _this.formValidate.images = element.imageId;
            _this.formValidate.flavors = element.flavorRef;
          }
        }
      }
    },
    listenTargetValueVm(value) {
      let _this = this;
      _this.formValidate.image = '';
      _this.formValidate.flavor = '';
      _this.currentTargetValue = '';
      if (!value) {
        _this.formValidate.image = '';
        _this.formValidate.flavor = '';
      }
      for (let i = 0; i < _this.targetVmListData.length; i++) {
        const element = _this.targetVmListData[i];
        if (value == element.id) {
          if (!element.imageId) {
            _this.$Message.info('无镜像ID，请手动选择');
          } else {
            _this.formValidate.image = element.imageId;
            _this.formValidate.pre = element.targetName;
            // _this.formValidate.flavor = element.flavorRef
          }
        }
      }
    },
    getPublicSubnetList() {
      let _this = this;
      this.axios({
        url: this.baseURL + '/topo-edit/public/subnets',
        method: 'GET'
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          _this.targetSubnetDataList = response.data.list;
        } else {
          _this.$Message.error(response.message);
        }
      });
    },
    getTargetDataList() {
      let _this = this;
      this.axios({
        // url:this.baseURL+'/exampaper/examPaperLibs/ctfPages?pageIndex=1&pageSize=1000000&visibility=all&isNeedEnv=1&matchMode='+this.getListModelBol,
        method: 'post',
        url: this.baseURL + '/new-paper/subjective/question/list?pageIndex=1&pageSize=1000000',
        data: { visibility: '', isNeedEnv: 1, matchMode: this.getListModelBol }
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          response.data.items.forEach((item) => {
            this.$set(item, 'chaId', item.id);
          });
          _this.targetDataList = response.data.items;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    switchineTaskCurrentPage(numberPage) {
      this.currentPage = numberPage;
      this.getProjectList();
    },
    switchTaskItemPage(numberSize) {
      this.currentItem = numberSize;
      this.getProjectList();
    },
    handleClose1(index) {
      let removeList = this.formValidate.selectedVmClinet.splice(index, 1);
      if (removeList && removeList.length) {
        // 需要通过被删除的元素，找到selectedVmData中对应的数据同步删除
        let removeItem = removeList[0];
        let removeIndex = this.formValidate.selectedVmData.findIndex(
          (item) => item.id === removeItem.id
        );
        this.formValidate.selectedVmData.splice(removeIndex, 1);
      }
    },
    handleClose2(index) {
      let removeList = this.formValidate.selectedVmServer.splice(index, 1);
      if (removeList && removeList.length) {
        // 需要通过被删除的元素，找到selectedVmData中对应的数据同步删除
        let removeItem = removeList[0];
        let removeIndex = this.formValidate.selectedVmData.findIndex(
          (item) => item.id === removeItem.id
        );
        this.formValidate.selectedVmData.splice(removeIndex, 1);
      }
    },
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.contentHei = this.fullHeight - 80 - 60 + 'px'; // 80是头部高度  60是上下padding
      this.setTableHei = this.fullHeight - 80 - 60 - 52 - 49 - 63;
      this.proPageSize = Math.floor(this.setTableHei / 50) - 1;
    },
    refreshScenPro() {
      this.searchProjectname = '';
      this.projectTypeValue = '';
      this.getProjectList();
    },
    getProjectList() {
      let _this = this;
      this.axios({
        url:
          this.baseURL +
          '/competetopo/projects?pageIndex=' +
          this.currentPage +
          '&pageSize=' +
          this.currentItem +
          '&projectname=' +
          this.searchProjectname +
          '&type=' +
          this.projectTypeValue
      })
        .then((response) => {
          response = response.data;
          if (response.code == 1) {
            if (response.data.items.length != 0) {
              let bol = true;
              for (let index = 0; index < response.data.items.length; index++) {
                const element = response.data.items[index];
                if (element.status == 9 || element.status == 13 || element.status == 4) {
                  bol = false;
                }
                response.data.items[index].delIcon = require('../../assets/project/dels.png');
              }
              if (bol) {
                clearTimeout(this.setintervalTime);
              } else {
                this.setintervalTime = setTimeout(() => {
                  this.getProjectList();
                }, 3000);
              }
              this.showDefImg1 = false;
              this.showProjectList = true;
            } else {
              this.showDefImg1 = true;
              this.showProjectList = false;
            }
            this.projectList = response.data.items;
            this.proTotal = response.data.total;
          } else {
            // this.$Message.error(response.message)
            this.showDefImg1 = true;
            this.showProjectList = false;
          }
        })
        .catch((err) => {
          this.showDefImg1 = true;
          this.showProjectList = false;
        });
    },
    creatProBtn() {
      this.btnValue = 2;
      this.disabledClient = true;
      this.disabledColor = '#F4F4F4';
      this.currentTargetValue = '';
      this.currentTargetValueVm = '';
      this.hintBol = false;
      this.createProjectTaskModal = true;
      this.topicBol = true;
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.images = '';
      this.formValidate.flavors = '';
      this.formValidate.num = '';
      this.formValidate.pre = '';
      this.formValidate.vmtype = 'CLIENT';
      this.formValidate.name = '';
      this.formValidate.desc = '';
      this.formValidate.type = '';
      this.formValidate.selectedVmData = [];
      this.formValidate.setNumber = 2;
      this.formValidate.numbers = 1;
      this.formValidate.targetNumber = 200;
      this.currentTargetSubnetValue = '';
      this.formValidate.pre = '接入机器1';
      this.prefixNum = 1;
      this.getTargetDataList(); //查询主观题试题列表
      this.getImageList(); // 获取所有镜像列表
      this.getFlavorList(); // 获取所有配额
      this.getTargetVmList(); // 查询靶标列表
      this.getPublicSubnetList();
    },
    getImageList() {
      this.axios({
        // url:this.baseURL+'/virtual/image/list',
        url: this.baseURL + '/resource-manager/image/list?pageIndex=1&pageSize=9999',
        method: 'post',
        data: {}
      }).then((response) => {
        if (response.data.code == 1) {
          this.imageDataList = response.data.data.items;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    getImageDetail(imageId) {
      // 根据ID查询镜像信息
      if (!imageId) {
        return;
      }
      this.axios({
        // url:this.baseURL+'/virtual/image/imagedate/'+imageId,
        url: this.baseURL + `/resource-manager/image/detail/${imageId}`,
        method: 'GET'
      }).then((response) => {
        if (response.data.code == 1) {
          let imageInfo = response.data.data;
          this.showFloverList = this.flavorDataList.filter(
            (flover) =>
              Number(flover.ram) >= imageInfo.minRam && Number(flover.disk) >= imageInfo.minDisk
          );
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    getFlavorList() {
      this.axios({
        // url:this.baseURL+'/virtual/flavor/list',
        url: this.baseURL + '/resource-manager/flavor/list?pageIndex=1&pageSize=9999',
        method: 'POST'
      }).then((response) => {
        if (response.data.code == 1) {
          this.flavorDataList = response.data.data.items;
          this.showFloverList = response.data.data.items;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    saveProjectData() {
      let _this = this;
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (_this.formValidate.type == 'offense_and_defense') {
            //攻防赛   题目必选   接入不是必选
            if (this.formValidate.selectedVmServer.length == 0) {
              //判断题目长度
              this.$Message.info('请添加题目配置');
              this.createProjectTaskModalLoading = false;
              this.$nextTick(() => {
                this.createProjectTaskModalLoading = true;
              });
              return;
            }
          } else if (_this.formValidate.type == 'break_through') {
            //渗透演练    题目接入都是必选
            if (this.formValidate.selectedVmClinet.length == 0) {
              //判断题目长度
              this.$Message.info('请添加接入机器配置');
              this.createProjectTaskModalLoading = false;
              this.$nextTick(() => {
                this.createProjectTaskModalLoading = true;
              });
              return;
            }
            if (this.formValidate.selectedVmServer.length == 0) {
              //判断长度
              this.$Message.info('请添加题目配置');
              this.createProjectTaskModalLoading = false;
              this.$nextTick(() => {
                this.createProjectTaskModalLoading = true;
              });
              return;
            }
          } else if (_this.formValidate.type == 'protect_network_exercise') {
            //护网演练    接入必选   题目不是必选
            if (this.formValidate.selectedVmClinet.length == 0) {
              //判断题目长度
              this.$Message.info('请添加接入机器配置');
              this.createProjectTaskModalLoading = false;
              this.$nextTick(() => {
                this.createProjectTaskModalLoading = true;
              });
              return;
            }
          }
          if (this.formValidate.selectedVmData.length != 0) {
            let arr = [];
            for (let i = 0; i < _this.formValidate.selectedVmData.length; i++) {
              let obj = {};
              obj['flavorId'] = _this.formValidate.selectedVmData[i].id.split(',')[1];
              obj['imageId'] = _this.formValidate.selectedVmData[i].id.split(',')[0];
              obj['namePrefix'] = _this.formValidate.selectedVmData[i].name.split('/')[2];
              obj['vmCount'] = _this.formValidate.selectedVmData[i].name.split('/')[4];
              obj['vmType'] = _this.formValidate.selectedVmData[i].name.split('/')[3];
              let targetTypeName = _this.formValidate.selectedVmData[i].name.split('/')[5];
              if (targetTypeName == '手动配置') {
                obj['targetName'] = '';
                obj['targetType'] = '0';
              } else if (targetTypeName == '题目') {
                obj['targetName'] = _this.formValidate.selectedVmData[i].name.split('/')[6];
                obj['targetType'] = '2';
              } else if (targetTypeName == '靶标') {
                obj['targetName'] = _this.formValidate.selectedVmData[i].name.split('/')[6];
                obj['targetType'] = '1';
              }
              obj['imageName'] = _this.formValidate.selectedVmData[i].name.split('/')[0];
              obj['targetId'] = _this.formValidate.selectedVmData[i].id.split(',')[2];
              arr.push(obj);
            }
            let data = null;
            if (this.formValidate.type != 'protect_network_exercise') {
              data = {
                envCount: this.formValidate.setNumber,
                projectName: this.formValidate.name,
                type: this.formValidate.type,
                vms: arr
              };
              if (this.formValidate.type == 'offense_and_defense') {
                data['flagServer'] = this.formValidate.flagServer;
              }
            } else {
              // if(!this.currentTargetSubnetValue){
              //     this.$Message.info("请选择公网子网");
              //     this.createProjectTaskModalLoading = false;
              //     this.$nextTick(() => {
              //         this.createProjectTaskModalLoading = true;
              //     });
              //     return;
              // }
              if (!this.formValidate.targetNumber) {
                this.$Message.info('请填写靶标个数');
                this.createProjectTaskModalLoading = false;
                this.$nextTick(() => {
                  this.createProjectTaskModalLoading = true;
                });
                return;
              }
              data = {
                envCount: this.formValidate.setNumber,
                projectName: this.formValidate.name,
                type: this.formValidate.type,
                publicSubnetId: this.currentTargetSubnetValue,
                targetCount: this.formValidate.targetNumber,
                hwDeployMode:
                  this.formValidate.type === 'protect_network_exercise'
                    ? this.formValidate.deployMode
                    : undefined,
                hwChangeIp:
                  this.formValidate.type === 'protect_network_exercise'
                    ? this.formValidate.hwChangeIp === '1'
                    : undefined,
                vms: arr
              };
            }
            this.saveLoading = true;
            this.axios({
              url: this.baseURL + '/competetopo/projects?deploy=true',
              method: 'POST',
              data: data
            }).then((response) => {
              response = response.data;
              if (response.code == 1) {
                this.saveLoading = false;
                this.stepState = false;
                this.createProjectTaskModal = false;
                this.createProjectTaskModalLoading = false;
                this.$nextTick(() => {
                  this.createProjectTaskModalLoading = true;
                });
                this.formValidate.selectedVmClinet = [];
                this.formValidate.selectedVmServer = [];
                this.getProjectList();
                this.cancel();
                // 重置步骤
                this.step = 1;
                this.formValidate.vmtype = 'CLIENT';
                this.$emit('setProjectUpdate', false);
              } else {
                this.$Message.error(response.message);
                this.createProjectTaskModalLoading = false;
                this.saveLoading = false;
                this.$nextTick(() => {
                  this.createProjectTaskModalLoading = true;
                });
              }
            });
          } else {
            this.$Message.info('请选择设备数据');
            this.createProjectTaskModalLoading = false;
            this.$nextTick(() => {
              this.createProjectTaskModalLoading = true;
            });
          }
        } else {
          this.createProjectTaskModalLoading = false;
          this.$nextTick(() => {
            this.createProjectTaskModalLoading = true;
          });
        }
      });
    },
    getTargetVmList() {
      let _this = this;
      this.axios({
        // url:this.baseURL+'/nsrep-targetinfo/targetManage/queryTargetPage?page=1&rows=1000000'
        url: this.baseURL + '/resource-manager/target/list?pageIndex=1&pageSize=1000000',
        method: 'post'
      }).then((response) => {
        if (response.data.code == 1) {
          _this.targetVmListData = [];
          let data_ = response.data.data.items;
          for (let i = 0; i < data_.length; i++) {
            if (data_[i].imageId) {
              _this.targetVmListData.push(data_[i]);
            }
          }
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    changeProStatus() {},

    searchProName() {
      this.getProjectList();
    },
    proOnChange() {},
    commitSelectData() {
      let _this = this;
      if (this.formValidate.vmtype == 'SERVER') {
        if (!this.currentTargetValue) {
          this.$Message.info('请选择题目');
          return;
        }
        if (this.formValidate.numbers < 1) {
          this.$Message.warning('数量最小为1!');
          return;
        }
      } else {
        if (!this.formValidate.vmtype) {
          this.$Message.info('请填选择设备类型');
          return;
        }
        if (!this.formValidate.image) {
          this.$Message.info('请选择镜像');
          return;
        }
        if (!this.formValidate.flavor) {
          this.$Message.info('请选择配额');
          return;
        }
        if (!this.formValidate.pre) {
          this.$Message.info('请填写名称前缀');
          return;
        }
        if (this.formValidate.numbers < 1) {
          this.$Message.warning('数量最小为1!');
          return;
        }
      }

      let currentImageName = '',
        currentFlavorName = '',
        currentTargetName = '',
        targetType = '';
      let imageKey = 'image',
        flavorKey = 'flavor';
      if (_this.formValidate.vmtype == 'SERVER') {
        imageKey = 'images';
        flavorKey = 'flavors';
      }
      for (let i = 0; i < _this.imageDataList.length; i++) {
        if (_this.formValidate[imageKey] == _this.imageDataList[i].id) {
          currentImageName = _this.imageDataList[i].imageName;
          break;
        }
      }
      for (let i = 0; i < _this.flavorDataList.length; i++) {
        if (_this.formValidate[flavorKey] == _this.flavorDataList[i].cloudId) {
          currentFlavorName = _this.flavorDataList[i].flavorName;
          break;
        }
      }
      if (this.formValidate.vmtype == 'CLIENT') {
        //普通
        targetType = '手动配置';
        _this.formValidate.selectedVmData.push({
          name:
            currentImageName +
            '/' +
            currentFlavorName +
            '/' +
            _this.formValidate.pre +
            '/' +
            _this.formValidate.vmtype +
            '/' +
            this.formValidate.numbers +
            '/' +
            targetType,
          id: _this.formValidate.image + ',' + _this.formValidate.flavor
        });
        _this.formValidate.selectedVmClinet.push({
          name:
            currentImageName +
            '/' +
            currentFlavorName +
            '/' +
            _this.formValidate.pre +
            '/' +
            _this.formValidate.vmtype +
            '/' +
            this.formValidate.numbers +
            '/' +
            targetType,
          id: _this.formValidate.image + ',' + _this.formValidate.flavor
        });
        this.prefixNum += 1;
        this.formValidate.pre = '接入机器' + this.prefixNum;
      } else if (this.formValidate.vmtype == 'SERVER') {
        //
        if (this.btnValue == 2) {
          //题目
          for (let i = 0; i < _this.targetDataList.length; i++) {
            if (_this.currentTargetValue == _this.targetDataList[i].chaId) {
              currentTargetName = _this.targetDataList[i].name;
              break;
            }
          }
          targetType = '题目';
          _this.formValidate.selectedVmData.push({
            name:
              currentImageName +
              '/' +
              currentFlavorName +
              '/' +
              _this.formValidate.pre +
              '/' +
              _this.formValidate.vmtype +
              '/' +
              this.formValidate.numbers +
              '/' +
              targetType +
              '/' +
              currentTargetName,
            id:
              _this.formValidate.images +
              ',' +
              _this.formValidate.flavors +
              ',' +
              _this.currentTargetValue
          });
          _this.formValidate.selectedVmServer.push({
            name:
              currentTargetName +
              '/' +
              currentImageName +
              '/' +
              currentFlavorName +
              '/' +
              _this.formValidate.pre +
              '/' +
              _this.formValidate.vmtype +
              '/' +
              this.formValidate.numbers +
              '/' +
              targetType,
            id:
              _this.formValidate.images +
              ',' +
              _this.formValidate.flavors +
              ',' +
              _this.currentTargetValue
          });
        } else if (this.btnValue == 1) {
          //靶标
          targetType = '靶标';
          for (let i = 0; i < _this.targetVmListData.length; i++) {
            if (_this.currentTargetValueVm == _this.targetVmListData[i].id) {
              currentTargetName = _this.targetVmListData[i].targetName;
              break;
            }
          }
          _this.formValidate.selectedVmData.push({
            name:
              currentImageName +
              '/' +
              currentFlavorName +
              '/' +
              _this.formValidate.pre +
              '/' +
              _this.formValidate.vmtype +
              '/' +
              this.formValidate.numbers +
              '/' +
              targetType +
              '/' +
              currentTargetName,
            id:
              _this.formValidate.image +
              ',' +
              _this.formValidate.flavor +
              ',' +
              _this.currentTargetValue
          });
        }
      }
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.numbers = 1;
      // this.formValidate.pre = '接入机器'+(this.formValidate.selectedVmData.length+1)
      this.currentTargetValue = '';
      this.currentTargetValueVm = '';
      // this.formValidate.vmtype = "";
    },
    // 计算index
    handleProIndex(key) {
      return (this.currentPage - 1) * this.currentItem + key + 1;
    },
    // 显示配置信息
    handleTargets(data) {
      let arr = '';
      if (data.length != 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].targetType == 0) {
            //其他
            arr +=
              i +
              1 +
              '.' +
              '镜像名称:' +
              data[i].imageName +
              ';前缀:' +
              data[i].namePrefix +
              ';数量:' +
              data[i].count +
              ';';
          } else if (data[i].targetType == 1) {
            //靶标
            arr +=
              i +
              1 +
              '.' +
              '靶标:' +
              data[i].targetName +
              ';' +
              '镜像名称:' +
              data[i].imageName +
              ';' +
              '前缀:' +
              data[i].namePrefix +
              ';数量:' +
              data[i].count +
              ';';
          } else if (data[i].targetType == 2) {
            //题目
            arr +=
              i +
              1 +
              '.' +
              '题目:' +
              data[i].targetName +
              ';' +
              '镜像名称:' +
              data[i].imageName +
              ';' +
              '前缀:' +
              data[i].namePrefix +
              ';数量:' +
              data[i].count +
              ';';
          }
        }
      }
      return arr;
    },
    // 设置工程状态颜色
    setColor(status) {
      if (!status) {
        if (status != 0) {
          status = 20;
        }
      }
      let obj = {
        color: 'grey',
        text: ''
      };
      let color = 'grey';
      let text = '';
      // if(!status){
      //     return false
      // }
      switch (status) {
        case 0: // 未部署
          obj.color = '#888';
          obj.text = '未部署';
          return obj;
          break;
        case 3: // 部署成功
          obj.color = '#06b649';
          obj.text = '部署成功';
          return obj;
          break;
        case 4: // 删除中
          obj.color = '#ff4242';
          obj.text = '删除中';
          return obj;
          break;
        case 6: // 部署失败
          obj.color = '#ff4242';
          obj.text = '部署失败';
          return obj;
          break;
        case 8: // 删除失败
          obj.color = '#fa9901';
          obj.text = '删除失败';
          return obj;
          break;
        case 9: // 部署中
          obj.color = '#06b649';
          obj.text = '部署中';
          return obj;
          break;
        case 12: // 待删除
          obj.color = '#888';
          obj.text = '待删除';
          return obj;
          break;
        case 13: // 清空部署中
          obj.color = '#ff8244';
          obj.text = '清空部署中';
          return obj;
          break;
        case 14: // 清空部署失败
          obj.color = '#ff8244';
          obj.text = '清空部署失败';
          return obj;
          break;
        case 16: // 工程导入中
          obj.color = '#088cf0';
          obj.text = '工程导入中';
          return obj;
          break;
        case 17: // 工程导入失败
          obj.color = '#cb0236';
          obj.text = '工程导入失败';
          return obj;
          break;
        case -99: // 工程导入失败
          obj.color = '#cb0236';
          obj.text = '工程已删除';
          return obj;
          break;
        default:
          obj.color = '#cb0236';
          obj.text = '未知状态';
          return obj;
          break;
      }
    },
    enterDelIcon(key) {
      this.projectList[key].delIcon = require('../../assets/project/dels-h.png');
    },
    leaveDelIcon(key) {
      this.projectList[key].delIcon = require('../../assets/project/dels.png');
    },
    // 跳转
    goTopo(row) {
      window.openTrain(`/jjzzTopo/index.html#/ProjectViews?projectId=${row.id}`);
    },
    // 设置样式
    setCanClick(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return { 'pointer-events': 'none' };
      }
    },
    setDelSrc(item) {
      if (item.creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    }
  }
};
</script>
<style scoped>
.page-wrap {
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 14px;
}
.img-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.page-heade-text {
  font-weight: 700;
  font-size: 18px;
}
.filter-wrap {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 120px);
  align-items: center;
  padding-left: 10px;
}
.content-wrap {
  max-height: 700px;
  width: 100%;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
}
.project-name {
  font-size: 16px;
  color: #1563C2 ;
  font-weight: 600;
  width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-Name {
  font-size: 16px;
  color: #1563C2 ;
  font-weight: 600;
  width: 240px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-status-text {
  color: #333;
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
  width: 100px;
}
.btn-icon-wrap {
  display: flex;
  justify-content: end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #adadad;
  font-weight: bold;
  width: 100%;
}
.project-others-infos {
  color: #adadad;
  font-weight: bold;
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-creationTime {
  color: #adadad;
  font-weight: bold;
  width: 220px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.config-info {
  width: calc(100% - 265px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.chose-wrap {
  display: flex;
  justify-content: space-between;
  padding: 3px 8px;
  background-color: var(--table-tr-hover-color);
  align-items: center;
  margin-top: 10px;
}
.chose-name {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chose-s-icon {
  width: 15px;
  height: 17px;
  display: inline-block;
  margin-bottom: 1px;
  margin-right: 10px;
}
.project-page-drawer {
  position: relative;
}
/* 省略图 */
.defGraphWrap {
  width: 157px;
  height: 180px;
  margin: 0 auto;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
</style>
<style>
#createProject .contentTag .ivu-icon-ios-close {
  /* overflow:visible !important;
    height:64px !important; */
  position: relative !important;
  /* bottom: -3px; */
  top: -13px !important;
}
#createProject .contentTag .ivu-tag-dot-inner {
  position: relative !important;
  top: -11px !important;
  /* min-height: 32px !important;
    height:64px !important; */
}
#createProject .ivu-tag-text {
  /* word-break: break-all !important; */
  width: 220px !important;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.starlet {
  color: red;
  position: absolute;
  left: -60px;
  font-size: 14px;
  line-height: 38px;
  font-weight: 800;
}
</style>
